<style scoped>


    #page-list {
        background: #fff;
    }
    #page-list  #listwrap {
        min-height: calc(100% - 0.8rem);
        min-height: -webkit-calc(100% - 0.8rem);

        background: #fff;
    }
    #page-list .w-goodsList-item .w-goods-l .w-goods-info {
        width: 1.7rem;
    }
    #page-list .ico-sort2Arrow2,#page-list .ico-sort2Arrow3 {
        font-size: 0.15rem;
        font-family: "ifont" !important;
        display: inline-block;
        margin: 0;
        transition: all .3s;
        -webkit-transition: all .3s;
    }
    #page-list .ico-sort2Arrow2,.up .ico-sort2Arrow2 {
        transform: rotateZ(90deg);
        -webkit-transform: rotateZ(90deg);
    }
    #page-list .down .ico-sort2Arrow2 {
        transform: rotateZ(-90deg);
        -webkit-transform: rotateZ(-90deg);
    }
    #page-list .ico-sort2Arrow3,.up .ico-sort2Arrow3 {
        transform: rotateZ(-90deg);
        -webkit-transform: rotateZ(-90deg);
    }
    #page-list .down .ico-sort2Arrow3 {
        transform: rotateZ(90deg);
        -webkit-transform: rotateZ(90deg);
    }
    /* list */
    #page-list .m-list .g-body-hd {
        position: relative;
    }
    #page-list .m-list-nav {
        background-color: #eee;
        border-bottom: 1px solid #d5d5d5;
        font-size: 0.12rem;
    }
    #page-list .m-list-nav a {
        color: #999;
    }

    #page-list .g-body{
        font-family: 'Microsoft JhengHei Light', 'Microsoft JhengHei', 'Microsoft YaHei Light', 'Microsoft YaHei', sans-serif;
        margin-bottom: 0.50rem;
    }

    #page-list .m-list-nav .selected a {
        border:0;
        color: #ef3737;
    }

    #page-list .m-list-nav-catlog {
        float: left;
        padding: 0.4rem 0;
        width: 0.80rem;
        height: 0.26rem;
        line-height: 0.26rem;
        text-align: center;
    }
    #page-list .m-list-nav-catlog a {
        display: block;
        border-right: 1px solid #d5d5d5;
    }
    #page-list .m-list-nav-catlog .open {
        margin-top: -0.04rem;
        height: 0.35rem;
        line-height: 0.34rem;
        background: #fff;
    }
    #page-list .m-list-nav-catlog .ico {
        margin-left: 0.04rem;
        margin-top: -0.02rem;
        transition: all .3s;
        -webkit-transition: all .3s;
    }
    #page-list .m-list-types {
        height: 100%;
        position: relative;
        overflow: hidden;
        font-size: 0.14rem;
        box-shadow: 0 0 0.02rem #dedede;
        box-sizing: border-box;
    }

    /*  page list / yqw 1227 → rem */

    #page-list .m-list-types-list {
        /*padding: 0 0.1rem;*/
        position: absolute;
        left: 0;
        right:0;
        margin:0 auto;
        height: 0.4rem;
        line-height: 0.4rem;
        display: box;
        display: -webkit-box;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        border-bottom: 1px solid #e6e6e6;
    }
    #page-list .m-list-types-list li {
        position: relative;
        text-align: center;
        box-flex: 1;
        -webkit-box-flex: 1;
        -moz-box-flex: 1;

    }
    #page-list .m-list-types-list li a {
        color: #364348;
        display: inline-block;
        padding: 0 0.06rem;
        line-height: 0.19rem
    }

    .w-goodsList-item .w-goods-l .w-goods-info {
        /*width: 1.7rem;*/
    }

    #page-list .m-list-types .ico {
        margin-top: -0.02rem;
        margin-left: 0.03rem;
    }
    #page-list .m-list-nav .selected .ico-arrow {
        border-color: #db3625
    }
    #page-list .m-list-nav .selected.up .ico-sort2Arrow:before {
        border-color: #db3625
    }
    #page-list .m-list-nav .selected.down .ico-sort2Arrow:after {
        border-color: #db3625
    }
    #page-list .m-list-catlog {
        /*position: fixed;*/
        /*left: 0;*/
        /*top: 35px;*/
        width: 0.80rem;
        /*height: 264px;*/
        background-color: #fff;
        font-size: 0.12rem;

    }

    #page-list .m-list-catlog-list {
        padding: 0;
        box-sizing: border-box;
    }
    #page-list .m-list-catlog-list li {
        background: #f2f2f2;
        line-height: 0.52rem;
        height: 0.52rem;
        width: 0.95rem;
    }
    #page-list .m-list-catlog-list li a {
        font-size: 0.14rem;
        display: inline-block;
        color: #364348;
        width: 100%;
        text-align: center;
        padding: 0;
        background: #f2f2f2;
    }

    #page-list .m-list-catlog-list li a:before{
        content: "";
        display: block;
        position: absolute;
        left: -50%;
        bottom:0;
        width: 200%;
        height: 1px;
        /*background: #dedede;*/
        -webkit-transform:scale(0.5);
    }
    #page-list .m-list-catlog-list li.selected a:before{
        content: "";
        display: block;
        position: absolute;
        left: -50%;
        bottom:0;
        width: 200%;
        height: 1px;
        background: #e6e6e6;
        -webkit-transform:scale(0.5);
    }

    #page-list .m-list-catlog-list li a:after{
        content: "";
        display: block;
        position: absolute;
        top: -50%;
        right:0;
        width: 1px;
        height: 0.88rem;
        /*background: #e6e6e6;*/
        -webkit-transform:scale(0.5);

    }

    #page-list .m-list-catlog-list li.selected:before{
        content: "";
        display: block;
        position: absolute;
        left: -50%;
        bottom:0;
        width: 200%;
        height: 0px;
        background: transparent;
        -webkit-transform:scale(0.5);
    }

    #page-list .m-list-catlog-list .selected a:after{
        content: "";
        display: block;
        position: absolute;
        left: -50%;
        top:0;
        width: 200%;
        height: 1px;
        background: #e6e6e6;
        -webkit-transform:scale(0.5);
    }


    #page-list .m-list-catlog-list .selected a{
        background: #fff;
        /*border-right: 1px solid #dedede;*/
    }

    #page-list .m-list-catlog-list .ico-type {
        margin-top: -2px;
        margin-right: 5px;
    }
    #page-list .m-list-total {
        text-align: center;
        line-height: 0.30rem;
        color: #8f8f8f;
        font-size: 0.12rem;
        border-bottom: 1px solid #dcdcdc;
    }
    #page-list .w-goods-l {
        margin-left: 0.95rem;
        border-bottom: 1px solid #dedede;
        height: 1.175rem;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    #page-list .w-goods-l .w-goods-link{
        width: 100%;
        height: 100%;
        color: #333;
        display: block;
        position: relative;
        outline: none;
        background: transparent;
        -webkit-tap-highlight-color: transparent;

    }
    #page-list .w-goods-l .w-goods-link:active{
        /*background-color: #efefef;*/
    }
    #page-list .w-goods-l .w-goods-title {
        font-size: 0.16rem;
        line-height: 0.21rem;
        color: #1d2528;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    #page-list .w-goods-l .w-progressBar {
        width: 100%;
        margin-top: 0.02rem;
        font-size: 0.12rem;
    }
    #page-list .w-goods-l .w-progressBar p {
        font-size: 0.12rem;
        color: #475359;
    }

    #page-list .w-goods-l .w-progressBar .txt {
        margin-top: 0.04rem;
    }
    #page-list .w-goods-l .w-goods-shortFunc {
        bottom: 0.12rem;
        right: 0.16rem;
        width: 0.89rem;
        height: 0.25rem;
        color: #ef3737;
        border: 1px solid currentColor;
        border-radius: 0.06rem;
    }
    #page-list .w-goods-l .w-goods-shortFunc .w-button-addToCart {
        text-align: center;
        width: 0.89rem;
        height: 0.25rem;
        line-height: 0.25rem;
        color: #ef3737;
        font-size:0.13rem
    }

    #page-list .w-goods-l {
        padding: 0.1rem 0 0.2rem 0;
    }
    #page-list .w-goods-l .w-goods-pic {
        position: relative;
        top: 0.1rem;
        left: 0.125rem;
        margin: 0;
        width: 0.7rem;
        height: 0.7rem;
        background-color: transparent;
    }

    #page-list .w-goods-l .w-goods-info {
        position: absolute;
        left: 0.95rem;
        top: 0.075rem;
        margin: 0
    }

    #page-list .list_catlog_swiper{
        position:fixed;
        left:0;
        top: 0.4rem;
        background: #f2f2f2;
        padding-bottom: 0.1rem;
        z-index: 1;
        height:calc(100% - .88rem);
        /*min-height: 100%;*/
        /*border-right: 1px solid #dedede;*/
    }

    #page-list .list_catlog_swiper ul{
        /*position: relative;*/
        height: auto;
    }
    #page-list .list_catlog_swiper ul::after {
        content: "";
        display: block;
        position: absolute;
        right: 0;
        top: -100%;
        width: 1px;
        height: 400%;
        background: #dedede;
        -webkit-transform:scale(0.5);
    }


    #page-list .list_catlog_swiper ul li em {
        background: none;
    }
    #page-list .w-loading, .w-more {
        margin-left: 0.95rem;
        font-size: 0.13rem;
    }
    #page-list .g-footer {
        display: none;
    }
    #page-list .isTenAnother2:before{
        content:'';
        position:absolute;
        right:-0.06rem;
        top:-0.06rem;
        width: 0.20rem;
        height: 0.20rem;
        background:  no-repeat;
        background-size:100% 100%;
    }
</style>
<template>
    <nav-component keep-alive ></nav-component>

    <div id="page-list" class="page-wrap">
        <div class="g-body">
            <div class="m-list">
                <!--二级导航 -->
                <div class="g-wrap g-body-hd m-list-nav">

                    <div style="position: fixed;top: 0;left: 0;width: 100%;height: 0.4rem;background-color: #ffffff;z-index: 2">
                        <div class="m-list-types">
                            <ul class="m-list-types-list">
                                <li :class="[ordername==1?'selected':'']" @click="tab(1)">
                                    <a href="javascript:;" >　人气　</a>
                                </li>
                                <li :class="[ordername==2&&!order?'selected':'']" @click="tab(2)">

                                    <a href="javascript:;" >　最新　</a>
                                </li>
                                <li :class="[ordername==3?'selected down':'',ordername==5?'selected up':'']" @click="tab(3)">
                                    <a href="javascript:;" >剩余人次<i class="ifont ico-sort2Arrow2">&#xe66b;</i><!--<i class='ico ico-sort2Arrow'></i>--></a>
                                </li>
                                <li :class="[order=='desc'?'selected down':'',order=='asc'?'selected up':'']" @click="tab(4)">
                                    <a href="javascript:;" >总需人次<i class="ifont ico-sort2Arrow3">&#xe66b;</i> <!--<i class='ico ico-sort2Arrow'></i>--></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!--所有分类列表-->
                    <div class="m-list-catlog" >
                        <div class="swiper-container swiper-container-vertical swiper-container-free-mode list_catlog_swiper" id="swiper">
                            <ul class="m-list-catlog-list  swiper-wrapper">
                                <li @click="changeCategory($event)"  :class="['swiper-slide',categoryid==0?'selected':'']"><a href="javascript:;" data-cid="">全部商品</a></li>

                                <li v-for="item in category" @click="changeCategory($event)" :data-cid="item.category_id" track-by="$index" :class="[categoryid==item.category_id?'selected':'','swiper-slide']"><em v-if="item.ishot==1"></em><a href="javascript:;" :data-cid="item.category_id">{{item.category_name}}</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!--&lt;!&ndash;正文&ndash;&gt;<div clas="g-wrap g-body-bd">-->

                <div class="g-body-bd-mask" v-show="loading!=false">
                    <div class="w-loading" >
                        <img style="display:inline;vertical-align:middle" width="20" height="20" src="http://mimg.127.net/p/yymobile/lib/img/common/loading.gif"> 正在努力加载中……
                        </div>
                </div>
                <!--商品列表-->

                <div class="m-list-content" id='listwrap'>


                    <ul class="w-goodsList w-goodsList-l m-list-goodsList" id="list">

                        <li class="w-goodsList-item" v-for="item in data" track-by="shopid">
                            <div class="w-goods w-goods-l w-goods-ing " :data-gi="item.shopid" :data-ten="item.isTen" :data-title="item.shopTitle">
                                <a  class="w-goods-link" v-link="{path:'/detail',query:{id:item.shopid}}">
                                    <!--<i :class="[item.isTen?'ico-label-ten':'']"></i>-->
                                    <div :class="['w-goods-pic',!!item.isTen?'isTenAnother':'']" :data-img="item.shopid" :style="{backgroundImage:'url('+item.thumb+')'}">
                                        <img :src="item.thumb" style="display: none"/>
                                    </div>
                                    <div class="w-goods-info">
                                        <div class="w-goods-title f-txtabb f-breakword">{{item.shopTitle}}</div>
                                        <div class="w-progressBar"><p class="wrap"><span class="bar" :style="{width:(item.currentNum/item.totalNum)*100+'%'}"><i class="color"></i></span></p><ul class="txt"><li class="txt-l"><p>总需 <span style="color:#fd8730">{{item.totalNum}}</span></p></li><li class="txt-r"><p>剩余 <b style="color: #ef3737">{{item.totalNum-item.currentNum}}</b></p></li></ul></div>
                                    </div>
                                </a>

                                <div class="w-goods-shortFunc" v-if="item.totalNum-item.currentNum>0" :total="item.totalNum" :current="item.currentNum">
                                    <button class="w-button-addToCart" :data-addcart="item.shopid" @click="addCart">
                                        立即抢购
                                    </button>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <div class="w-more" id="listMore" v-el:list-more>

                        <template v-if="data.length>0&&hasMore"><b class="ico ico-loading"></b> 努力加载中</template>
                        <template v-if="!data&&!hasMore&&page==0"> 暂无商品</template>
                        <template v-if="!!data&&!hasMore"> 没有更多了</template>

                    </div>
                </div>

            </div>
        </div>
    </div>
</template>
<script>
    import headerComponent from '../components/header'
    import navComponent from '../components/nav'
    import Goods from '../module/goods'
    import Swiper from '../libs/swiper.min.js'
    import Cart from '../module/cart'

    export default {

        filters: {

        },


        directives: {

        },


        created(){
            this.$dispatch('isLoading',true)
        },
        data () {

            return {
                data: [],
                category:[],
                ordername:2,
                order:'',
                categoryid:0,
                page: 0,
                query:{},
                limit: 10,
                hasMore: true,
                loading: false,
                sw:null,
            }

        },
        watch:{


        },
        methods: {

            addCart(e){

                Cart.addCart($(e.target))

            },
            async getMore(){

                var pos = this.$els.listMore.getBoundingClientRect();

                if (this.hasMore &&
                        ((pos.top> 0 && window.innerHeight - pos.top> 0) ||
                        (pos.top <= 0 && pos.bottom >= 0))) {
                   await this.loadMore();
                }
            },
            async changeCategory(e){
                window.scrollTo(0,0);
                this.categoryid=e.target.dataset.cid;

                this.page=0;

                await this.initListData();

            },
           async tab(val){
                switch (val){
                    case 1:

                        if(this.ordername==1) return false;

                        this.page=0;

                        this.ordername=1;

                        if(!!this.order) this.order='';

                        await this.initListData();

                        break;
                    case 2:

                        if(this.ordername==2&&this.order=='') return false;

                        this.page=0;

                        this.ordername=2;

                        if(!!this.order) this.order='';

                        await this.initListData();

                        break;
                    case 3:

                        this.page=0;

                        this.ordername=this.ordername==3?5:3;

                        if(!!this.order) this.order='';

                        await this.initListData();

                        break;

                    case 4:

                        this.page=0;

                        this.ordername=2;

                        this.order=this.order=='desc'?'asc':'desc';

                        await this.initListData();

                        break;

                }

            },


            async initListData(){

                    if(this.loading) return;

                    this.hasMore=true;

                    this.loading=true;

                    let formData={

                        ordername:this.ordername,

                        order:this.order,

                        categoryid:this.categoryid,

                        offset:this.page*this.limit,

                        limit:this.limit

                    };
                    let res=await  Goods.getList(formData,this.$route.query);

                    console.log(res)

                    this.data.splice(0,this.data.length);

                    this.$nextTick(()=>{

                        if (res  && res.length > 0) {

                            this.data.push(...res);

                            this.page++;

                            if (res.length <10 ) {

                                this.hasMore = false;

                            }

                        } else {

                            this.hasMore = false;

                        }

                            this.loading = false;


                    })
            },
            async loadMore(){

                if(this.loading) return;

                this.hasMore=true;

                this.loading=true;

                let formData={
                    ordername:this.ordername,
                    order:this.order,
                    categoryid:this.categoryid,
                    offset:this.page*this.limit,
                    limit:this.limit
                }

                let res=await  Goods.getList(formData,this.$route.query);

                this.$nextTick(()=>{

                    if (res  && res.length > 0) {

                    this.data.push(...res);

                    this.page++;


                }else {

                    this.hasMore = false;

                }

                    this.loading = false;

                })

              }

        },

        async ready(){

            let category=await Goods.getCatgory();

            this.category.push(...category.item);

            await this.initListData();

            this.sw=new Swiper('#swiper',{
                direction:'vertical',
                slidesPerView: 'auto',
                observe:true
            });

            this.$dispatch('isLoading',false);

            document.addEventListener('scroll',this.getMore,false)

        },
        components:{

            headerComponent,
            navComponent

        },
        beforeDestroy () {

            this.sw.destroy(true,true);

            document.removeEventListener('scroll',this.getMore,false)

        }

    }
</script>
